<template>
  <div>
    <el-form :model="formItem" label-width="100px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="通知编号">
            {{ formItem.code }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通知名称">
            {{ formItem.name }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务停止时间">
            {{ formItem.stopTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="通知发送状态">
            {{ formItem.status === 'send' ? '已发送' : '未发送' }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护部门">
            {{ formItem.orgName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护地点">
            {{ formItem.location }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="通知方式">
            {{ formItem.noticeTypeName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护类别">
            {{ formItem.modelName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护对象">
            {{ formItem.objNames }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="维护开始时间">
            {{ formItem.startDateTime }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护结束时间">
            {{ formItem.endDateTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="通知人">
            {{ formItem.userNames }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="维护内容">
            {{ formItem.content }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="影响及保障措施">
            {{ formItem.impactSafeguard }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="其他影响情况">
            {{ formItem.others }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { detail } from '@neu/dcom-ui/api/stopServiceNotice'
import { formatDate } from '@neu/biz-core/utils/utils'

const formItem = {
  name: '',
  code: '',
  orgCode: null,
  orgName: '',
  modelCode: null,
  modelName: null,
  status: 'send',
  stopTime: '',
  location: '',
  startDateTime: '',
  endDateTime: '',
  jsonUsers: '',
  userNames: '',
  objNames: '',
  users: [],
  noticeType: [],
  noticeTypeName: '',
  others: '',
  impactSafeguard: '',
  content: '',
  instancesArray: [],
  jsonObjs: ''
}
export default {
  name: 'StopServiceNoticeViewForm',
  props: {
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      formItem: {
        ...formItem
      },
      /** 通知方式 */
      notices: [
        { value: 'notice', label: '系统通知' },
        { value: 'message', label: '短信' },
        { value: 'email', label: '邮件' }
      ]
    }
  },
  watch: {
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
          this.formItem.stopTime = formatDate(this.formItem.stopTime)
          this.formItem.startDateTime = formatDate(this.formItem.startDateTime)
          this.formItem.endDateTime = formatDate(this.formItem.endDateTime)
          const difference = this.notices.filter(t => {
            return this.formItem.noticeType.includes(t.value)
          })

          var noticeTypeNames = ''
          difference.forEach(i => {
            noticeTypeNames += i.label + ','
          })
          this.formItem.noticeTypeName = noticeTypeNames.substring(0, noticeTypeNames.length - 1)
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>
